"use client"

import { useState, useEffect, useRef } from "react"
import Image from "next/image"
import Link from "next/link"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import Emoji from "@/components/Emoji"
import { ChevronLeft, ChevronRight } from "lucide-react"

const nftImages = [
  
  { src: "/images/nfc/13.png", alt: "NFT Image 13" },
  { src: "/images/nfc/14.png", alt: "NFT Image 14" },
  { src: "/images/nfc/15.png", alt: "NFT Image 15" },
  { src: "/images/nfc/16.png", alt: "NFT Image 16" },
  { src: "/images/nfc/17.png", alt: "NFT Image 17" },
  { src: "/images/nfc/18.png", alt: "NFT Image 18" },
  { src: "/images/nfc/19.png", alt: "NFT Image 19" },
  { src: "/images/nfc/20.png", alt: "NFT Image 20" },
  { src: "/images/nfc/21.png", alt: "NFT Image 21" },
  { src: "/images/nfc/22.png", alt: "NFT Image 22" },
  { src: "/images/nfc/23.png", alt: "NFT Image 23" },
  { src: "/images/nfc/24.png", alt: "NFT Image 24" },
  { src: "/images/nfc/25.png", alt: "NFT Image 25" },

  { src: "/images/nfc/26.png", alt: "NFT Image 26" },
  { src: "/images/nfc/27.png", alt: "NFT Image 27" },
  { src: "/images/nfc/28.png", alt: "NFT Image 28" },
  { src: "/images/nfc/29.png", alt: "NFT Image 29" },
  { src: "/images/nfc/30.png", alt: "NFT Image 30" },
  { src: "/images/nfc/31.png", alt: "NFT Image 31" },
  { src: "/images/nfc/32.png", alt: "NFT Image 32" },
  { src: "/images/nfc/33.png", alt: "NFT Image 33" },
  { src: "/images/nfc/34.png", alt: "NFT Image 34" },
  { src: "/images/nfc/35.png", alt: "NFT Image 35" },
  { src: "/images/nfc/36.png", alt: "NFT Image 36" },
  { src: "/images/nfc/37.png", alt: "NFT Image 37" },
  { src: "/images/nfc/38.png", alt: "NFT Image 38" },

  { src: "/images/nfc/1913.png", alt: "NFT Image 1913" },
  { src: "/images/nfc/1914.png", alt: "NFT Image 1914" },
  { src: "/images/nfc/1915.png", alt: "NFT Image 1915" },
  { src: "/images/nfc/1916.png", alt: "NFT Image 1916" },
  { src: "/images/nfc/1917.png", alt: "NFT Image 1917" },
  { src: "/images/nfc/1918.png", alt: "NFT Image 1918" },
  { src: "/images/nfc/1919.png", alt: "NFT Image 1919" },
  { src: "/images/nfc/1920.png", alt: "NFT Image 1920" },
  { src: "/images/nfc/1921.png", alt: "NFT Image 1921" },
  { src: "/images/nfc/1922.png", alt: "NFT Image 1922" },
  { src: "/images/nfc/bf.png", alt: "NFT Image BF" },
  { src: "/images/nfc/bg.png", alt: "NFT Image BG" },
  { src: "/images/nfc/bh.png", alt: "NFT Image BH" },


  { src: "/images/nfc/ff.png", alt: "NFT Image FF" },
  { src: "/images/nfc/fg.png", alt: "NFT Image FG" },
  { src: "/images/nfc/fh.png", alt: "NFT Image FH" },
  { src: "/images/nfc/fi.png", alt: "NFT Image FI" },
  { src: "/images/nfc/jc.png", alt: "NFT Image JC" },
  { src: "/images/nfc/jd.png", alt: "NFT Image JD" },
  { src: "/images/nfc/jk.png", alt: "NFT Image JK" },
  { src: "/images/nfc/jf.png", alt: "NFT Image JF" },
  { src: "/images/nfc/jg.png", alt: "NFT Image JG" },
  { src: "/images/nfc/jh.png", alt: "NFT Image JH" },
  { src: "/images/nfc/jj.png", alt: "NFT Image JJ" },

  { src: "/images/nfc/ji.png", alt: "NFT Image JI" },
  { src: "/images/nfc/jm.png", alt: "NFT Image JM" },
  { src: "/images/nfc/jn.png", alt: "NFT Image JN" },
  { src: "/images/nfc/kk.png", alt: "NFT Image KK" },
  { src: "/images/nfc/kl.png", alt: "NFT Image KL" },
  { src: "/images/nfc/km.png", alt: "NFT Image KM" },
]

export default function NFTShowcasePage() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [displayCount, setDisplayCount] = useState(4)
  const [isAnimating, setIsAnimating] = useState(false)
  const carouselRef = useRef<HTMLDivElement>(null)

 
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setDisplayCount(1)
      } else if (window.innerWidth < 768) {
        setDisplayCount(2)
      } else if (window.innerWidth < 1024) {
        setDisplayCount(3)
      } else {
        setDisplayCount(4)
      }
    }

    handleResize()
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  
  const nextSlide = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setCurrentIndex((prevIndex) => (prevIndex + 1) % nftImages.length)
    setTimeout(() => setIsAnimating(false), 500)
  }

  const prevSlide = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setCurrentIndex((prevIndex) => (prevIndex - 1 + nftImages.length) % nftImages.length)
    setTimeout(() => setIsAnimating(false), 500)
  }


  useEffect(() => {
    const interval = setInterval(() => {
      if (!isAnimating) {
        setIsAnimating(true)
        setCurrentIndex((prevIndex) => (prevIndex + 1) % nftImages.length)
        setTimeout(() => setIsAnimating(false), 500)
      }
    }, 3000)

    return () => clearInterval(interval)
  }, [nftImages.length, isAnimating])

  
  const getVisibleNFTs = () => {
    const visibleNFTs = []
    for (let i = 0; i < displayCount; i++) {
      const index = (currentIndex + i) % nftImages.length
      visibleNFTs.push(nftImages[index])
    }
    return visibleNFTs
  }

  return (
    <main className="min-h-screen bg-dark-blue relative">
      
      <div className="fixed inset-0 z-0 bg-cover bg-top-left" style={{ backgroundImage: "url('/images/nfc-bg.jpg')" }}>
        <div className="absolute inset-0 bg-dark-blue opacity-80 z-10"></div>
      </div>

      <div className="relative z-10">
        <Navbar />

        
        <section className="relative pt-32 pb-16">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="mx-auto max-w-7xl">
              <div className="text-center mb-16 mt-8">
                <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-bera-yellow bg-clip-text text-transparent sm:text-5xl md:text-6xl mb-6">
                  Blue Beras NFT Showcase
                </h1>
                <p className="text-lg text-gray-300 max-w-3xl mx-auto">
                  Explore our exclusive collection of unique digital collectibles.
                </p>
              </div>

              <div className="relative mb-16">
                <div className="flex justify-center items-center">
                 
                  <button
                    onClick={prevSlide}
                    className="absolute left-0 z-10 p-2 rounded-full bg-dark-blue/50 text-white hover:bg-bera-blue/70 transition-colors"
                    aria-label="Previous NFT"
                  >
                    <ChevronLeft size={24} />
                  </button>

                  
                  <div
                    ref={carouselRef}
                    className="flex justify-center gap-4 overflow-hidden py-8 px-12 transition-transform duration-500 ease-in-out"
                  >
                    {getVisibleNFTs().map((nft, index) => (
                      <div
                        key={`nft-${currentIndex}-${index}`}
                        className="flex-shrink-0 w-64 h-64 sm:w-72 sm:h-72 bg-dark-blue-lighter/40 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:scale-105 border border-bera-blue/30 transform"
                        style={{
                          animation: isAnimating
                            ? `carousel-slide-${index === 0 ? "in" : "out"} 0.5s ease-in-out`
                            : "none",
                        }}
                      >
                        <div className="relative w-full h-full">
                          <Image
                            src={nft.src || "/placeholder.svg"}
                            alt={nft.alt}
                            fill
                            className="object-cover"
                            unoptimized 
                          />
                        </div>
                      </div>
                    ))}
                  </div>

                 
                  <button
                    onClick={nextSlide}
                    className="absolute right-0 z-10 p-2 rounded-full bg-dark-blue/50 text-white hover:bg-bera-blue/70 transition-colors"
                    aria-label="Next NFT"
                  >
                    <ChevronRight size={24} />
                  </button>
                </div>

               
                <div className="flex justify-center mt-6 gap-2">
                  {Array.from({ length: Math.ceil(nftImages.length / displayCount) }).map((_, pageIndex) => (
                    <button
                      key={pageIndex}
                      onClick={() => {
                        setIsAnimating(true)
                        setCurrentIndex(pageIndex * displayCount)
                        setTimeout(() => setIsAnimating(false), 500)
                      }}
                      className={`w-2 h-2 rounded-full transition-colors duration-300 ${
                        currentIndex >= pageIndex * displayCount && currentIndex < (pageIndex + 1) * displayCount
                          ? "bg-bera-blue"
                          : "bg-gray-500"
                      }`}
                      aria-label={`Go to page ${pageIndex + 1}`}
                    />
                  ))}
                </div>
              </div>

             
              <div className="text-center mb-20">
                <Link
                  href="https://opensea.io/collection/blue-beras-8"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-block bg-bera-blue hover:bg-bera-blue/80 text-white font-bold py-4 px-8 rounded-full shadow-lg transition-all hover:shadow-xl transform hover:scale-105"
                >
                  VIEW FULL COLLECTION
                </Link>
              </div>

              <div className="mb-16">
                <h2 className="text-3xl font-bold text-bera-yellow mb-8 text-center">NFT Functionality</h2>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  {[
                    {
                      title: "True Blue Credential",
                      description: "The best True Blue Bera credential.",
                      icon: "🔷",
                    },
                    {
                      title: "Largest Collection",
                      description: "The largest and best blue shits on Berachain.",
                      icon: "🏆",
                    },
                    {
                      title: "Token Airdrops",
                      description:
                        "Holders can receive Beraroot token airdrops based on their holdings.",
                      icon: "🪂",
                    },
                    {
                      title: "Future Benefits",
                      description:
                        "NFT holders will receive corresponding tokens airdropped from projects using our DA solutions in the future.",
                      icon: "🚀",
                    },
                  ].map((feature, index) => (
                    <div
                      key={index}
                      className="bg-dark-blue-lighter/40 backdrop-blur-sm rounded-lg p-6 border border-bera-blue/20 transform transition-transform hover:scale-[1.02]"
                    >
                      <div className="flex items-start">
                        <div className="text-4xl mr-4"><Emoji emoji={feature.icon} size={40} /></div>
                        <div>
                          <h3 className="text-xl font-semibold text-bera-yellow mb-2">{feature.title}</h3>
                          <p className="text-gray-300">{feature.description}</p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="rounded-xl overflow-hidden shadow-2xl">
                <Image
                  src="/images/H.jpg"
                  alt="Blue Beras Illustration"
                  width={1200}
                  height={600}
                  className="w-full h-auto object-cover object-center brightness-75"
                />
              </div>
            </div>
          </div>
        </section>

        <Footer />
      </div>

    
      <style jsx global>{`
        @keyframes carousel-slide-in {
          from { transform: translateX(100%); opacity: 0; }
          to { transform: translateX(0); opacity: 1; }
        }
        @keyframes carousel-slide-out {
          from { transform: translateX(0); opacity: 1; }
          to { transform: translateX(-100%); opacity: 0; }
        }
      `}</style>
    </main>
  )
}
